<template>
  <div id="data-view">
    <dv-full-screen-container>
      <div class="main-header">
        <div class="mh-left">


        </div>


        <div class="mh-middle">{{shouxueyuan}}成果转化数据</div>
        <div class="mh-right">



        </div>
      </div>

      <dv-border-box-1 class="main-container1">
        <dv-border-box-3 class="left-chart-container">
        <!--  <scroll-board />-->
        <!--<Left-Chart-1 />-->
          <Left-Chart-2 />
          <Left-Chart-3 />

        </dv-border-box-3>

        <div class="right-main-container1">
          <div class="rmc-top-container">
            <dv-border-box-3 class="rmctc-left-container">

              <Center-Cmp :dialogData="xueyaun"/>

            </dv-border-box-3>

            <div class="rmctc-right-container">
              <dv-border-box-3 class="rmctc-chart-1">

                <Right-Chart-1 />

              </dv-border-box-3>

              <dv-border-box-4 class="rmctc-chart-2" :reverse="true">

                <!--<Right-Chart-2 />-->
                <water-level-chart :dialogData="xueyaun"/>
              </dv-border-box-4>
            </div>
          </div>

          <dv-border-box-4 class="rmc-bottom-container">

            <Bottom-Charts :dialogData="xueyaun"/>

          </dv-border-box-4>
        </div>
      </dv-border-box-1>

    </dv-full-screen-container>
  </div>
</template>

<script>
import LeftChart1 from './LeftChart1'
import LeftChart2 from './LeftChart2'
import LeftChart3 from './LeftChart3'
import waterLevelChart from './waterLevelChart'
import CenterCmp from './CenterCmp'
import scrollBoard from './scrollBoard'
import RightChart1 from './RightChart1'
import RightChart2 from './RightChart2'

import BottomCharts from './BottomCharts'

export default {
  name: 'DataView',
  components: {
    LeftChart1,
    LeftChart2,
    LeftChart3,
    CenterCmp,
    RightChart1,
    RightChart2,
    BottomCharts,
    waterLevelChart,
    scrollBoard
  },
  data () {
    return {
      reload: 0,
      // 以下websocket
      wsIsRun: false,
      // 定义ws对象
      webSocket: null,
      // ws连接次数
      wsNumber: 0,
      // ws请求链接（类似于ws后台地址）
      ws: '',
      // ws定时器
      wsTimer: null,
      // 以上websocket
      xueyaun:null,
      shouxueyuan:null,
    }
  },
/*  watch:{

  },*/
  created() {
    this.xueyaun=this.$route.query.xueyuan;
    this.wsIsRun = true
    this.wsNumber = 1
    this.wsInit();
    this.$watch(
      () => [this.$route.query.xueyuan],
      () => {
        if(this.reload < 1){
          // alert(1);
           this.reload++ ;
          const xueyuan = this.$route.query.xueyuan;
          this.$router.push({path: "/dashujuzhanshi/nianfen1",query: {xueyuan}})
        }

/*        if(xueyuan === 'undefined'){

        }else{
          // this.$router.push({path: "/dashujuzhanshi/nianfen",query: {xueyuan}});
          /!*this.shouxueyuan = collegeMapping[xueyuan];
          this.$forceUpdate();*!/
          // this.$router.go(0);



        }*/

      }
    );
    const collegeMapping = {
      '001': '文学院',
      '002': '马克思主义学院',
      '003': '法学院',
      '004': '历史文化学院',
      '005': '物理科学与技术学院',
      '006': '数学科学学院',
      '007': '化学与材料工程学院',
      '008': '食品科学与工程学院',
      '009': '信息科学与技术学院',
      '010': '控制科学与工程学院',
      '011': '经济学院',
      '012': '管理学院',
      '013': '旅游学院',
      '014': '外国语学院',
      '015': '教育科学学院',
      '016': '体育学院',
      '017': '美术学院',
      '018': '音乐学院',
      '019': '新闻与传播学院',
      '020': '航运学院',
      '021': '大学外语教研部',
      '022': '师范学院',
      '023': '创新创业学院',
      '024': '继续教育学院',
      '025': '附属高级中学',
      '026': '国际教育学院'
    };

    this.shouxueyuan = collegeMapping[this.xueyaun]



  /*  this.xueyaun="信息学院"*/
  },
  methods: {
    //开始
    /**
     * start
     * 初始化ws
     */
    wsInit() {
      // console.log("userName: " + this.$store.state.user.ipp)
      console.log("user: " + this.$store.state.constip.ipp)
      // const wsuri = 'ws://' + '210.47.178.218' + ':8080/library/wsService/' + this.$store.state.user.name
      this.getConfigKey("sys.account.ip").then(response => {
        this.sysipp = response.msg;
      });
      console.log("sysipp: " + this.sysipp)
      const wsuri = 'ws://' + this.sysipp + '/library/wsService/' +
        this.$store.state.constip.ipp + "_" + Math.floor(Math.random() * (99999 - 10000) + 10000);
      console.log("wsuri: " + wsuri)
      this.ws = wsuri
      if (!this.wsIsRun)
        return
      // 销毁ws
      this.wsDestroy()
      // 初始化ws
      this.webSocket = new WebSocket(this.ws)
      // ws连接建立时触发

      this.webSocket.addEventListener('open', this.wsOpenHanler)
      // ws服务端给客户端推送消息

      this.webSocket.addEventListener('message', this.wsMessageHanler)

      // ws通信发生错误时触发
      this.webSocket.addEventListener('error', this.wsErrorHanler)
      // ws关闭时触发

      this.webSocket.addEventListener('close', this.wsCloseHanler)

      clearInterval(this.wsTimer);
    },
    subSend(userId) {

      //获取msg的value
      // var msg = document.getElementById("msg").value;

      this.webSocket.send(userId);

      // ws服务端给客户端推送消息

      // document.getElementById("msg").value="";
    },


    wsOpenHanler(event) {
      console.log('ws建立连接成功')
    },
    wsMessageHanler(e) {

      //Cookies.set('unreadNums', '6')

      this.openMsg(e)
      //const redata = JSON.parse(e.data)
      //console.log(redata)

    },
    /**
     * ws通信发生错误
     */
    wsErrorHanler(event) {
      console.log(event, '通信发生错误')
      console.log("第" + this.wsNumber + "次断线重连(5次未连接将自动断开)")
      this.wsNumber++
      if (this.wsNumber < 6) this.wsInit();
      //this.wsInit()
    },
    /**
     * ws关闭
     */
    wsCloseHanler(event) {
      console.log(event, 'ws关闭')
      console.log("websocket连接超时，已自动断开")
      //this.wsInit()
    },
    /**
     * 销毁ws
     */
    wsDestroy() {
      console.log("hello world")
      if (this.webSocket !== null) {
        this.webSocket.removeEventListener('open', this.wsOpenHanler)
        this.webSocket.removeEventListener('message', this.wsMessageHanler)
        this.webSocket.removeEventListener('error', this.wsErrorHanler)
        this.webSocket.removeEventListener('close', this.wsCloseHanler)
        this.webSocket.close()
        this.webSocket = null
        clearInterval(this.wsTimer)
        console.log("zoul111")
      } else {
        console.log("zoul")
      }
    },
    /**
     * 弹窗
     */
    openMsg(e) {
      const h = this.$createElement;
      if (e.data) {
        console.log(e.data+"222")
        if(e.data==1) {
          this.$router.push({path: "/dashujuzhanshi/dashujushouye"})
        }
        else if(e.data==2){
          this.$router.push({path: "/shou"})
        }else if(e.data==3){
          this.$router.push({path: "/mwnhugongshi"})
        }else if(e.data==4){
          this.$router.push({path: "/liucheng"})
        }else if(e.data==5){
          this.$router.push({path: "/dashujuzhanshi/xueyuan"})
        }else if(e.data==6){
          this.$router.push({path: "/dashujuzhanshi/nianfen"})
        }else if(e.data==10){
          window.scrollBy(0, 100);
        }else if(e.data==11){
          window.scrollBy(0, -100);
        }else if(e.data==21){
          this.$router.push({path: "/ykqlogin3"})
        }  else if(e.data==22){
          this.$router.push({path: "/ykqlogin4"})
        }else if(e.data==23){
          this.$router.push({path: "/ykqlogin5"})
        }else if(e.data==24){
          this.$router.push({path: "/shou"})
        }else if(e.data==210){
          this.$router.push({path: "/index"})
        }else if(e.data==211){
          this.$router.push({path: "/transformation"})
        }else if(e.data==212){
          this.$router.push({path: "/wodehetong"})
        }else if(e.data==213){
          this.$router.push({path: "/expense"})
        }else if(e.data==214){
          this.$router.push({path: "/qiye"})
        }else if(e.data==215){
          this.$router.push({path: "/geren"})
        }else if(e.data==216){
          this.$router.push({path: "/chengguogongshi"})
        }else if(e.data==217){
          this.$router.push({path: "/daochuxinxi"})
        }else if(e.data==218){
          this.$router.push({path: "/resultapply"})
        }else if(e.data==12){
          this.queryParams.signingStatus="0";
          console.log(this.queryParams.signingStatus)

        }else if(e.data==13){
          this.queryParams.signingStatus="1";
          console.log(this.queryParams.signingStatus)

        }else if(e.data>500&&e.data<2000){
          let id=e.data-500
          this.$router.push({path: "/detail",query: {id}})

        }else if(e.data>2000&&e.data<3000){
          let nianfen=e.data
          this.$router.push({path: "/dashujuzhanshi/xueyuan",query: {nianfen}})

        }else if(e.data>3000&&e.data<4000){
          let firstcollege=e.data
          let i_xueyuan=firstcollege-3000
          let xueyuan = '';
          if(i_xueyuan<10){
            xueyuan='00'+i_xueyuan;
          }else if(i_xueyuan>=10 && i_xueyuan<100){
            xueyuan='0'+i_xueyuan;
          }else{

          }
          console.log(xueyuan)
          this.$router.push({path: "/dashujuzhanshi/nianfen",query: {xueyuan}})
        }
        else{
          let userId=e.data
          this.$router.push({path: "/view",query: {userId}})

        }
      }
    }
    //结束


  }
}
</script>

<style lang="less" >
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url('./img/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .mh-left {
      font-size: 20px;
      color: rgb(1,134,187);

      a:visited {
        color: rgb(1,134,187);
      }
    }

    .mh-middle {
      margin-top: 5px;
      margin-left: -80px;
      font-size: 30px;
    }

    .mh-left, .mh-right {
      width: 450px;
    }
  }

  .main-container1 {
    min-height: 100%;
    transition: margin-left .28s;
    position: relative;
    height: 80%;
    margin-left: -5px;
    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .left-chart-container {
    width: 22%;
    padding: 10px;
    box-sizing: border-box;
height: 98%;
    .border-box-content {
      flex-direction: column;
    }
  }

  .right-main-container1 {
    width: 78%;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .rmc-top-container {
    height: 65%;
    display: flex;
  }

  .rmctc-left-container {
    width: 65%;
  }

  .rmctc-right-container {
    width: 35%;
  }

  .rmc-bottom-container {
    height: 32%;
    width: 100%;
  }

  .rmctc-chart-1, .rmctc-chart-2 {
    height: 50%;
  }
}
</style>
